<template>
  <div>
    <el-form-item label="显示千位分隔符" class="tr">
      <el-switch v-model="value.showSeparator"></el-switch>
    </el-form-item>
    <el-form-item label="公式">
      <el-input
        style="width: 100%"
        :value="value.numFormulaText"
        placeholder="公式="
        readonly
        @click.native="openNumFormulaModule"
      ></el-input>
    </el-form-item>
    <el-form-item label="前置单位">
      <el-input v-model="value.numPrefix" size="small"></el-input>
    </el-form-item>
    <el-form-item label="后置单位">
      <el-input v-model="value.numSuffix" size="small"></el-input>
    </el-form-item>
    <el-form-item label="精度">
      <xInput
        :disabled="value.type === 'INTEGER'"
        placeholder="请输入精度值"
        size="small"
        style="width: 100%"
        :value="value.numlimitNumber"
        @input="outInputLimitNumber"
      ></xInput>
    </el-form-item>
    <el-form-item label="显示样式">
      <el-radio-group
        v-model="value.numShowType"
        style="width: 100%"
        @change="changenumShowType"
      >
        <el-radio-button label="text">原始值</el-radio-button>
        <el-radio-button label="progress">进度条</el-radio-button>
        <el-radio-button label="circleProgress">环形进度</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item
      label="进度条宽度"
      v-if="value.numShowType === 'circleProgress'"
      class="tr"
    >
      <el-input-number
        style="width: 160px"
        v-model="value.circleProgressWidth"
        :min="0"
        controls-position="right"
        :precision="2"
      ></el-input-number>
    </el-form-item>
    <el-form-item
      label="进度条颜色"
      class="tr"
      v-if="value.numShowType !== 'text'"
    >
      <div class="tag-set">
        <el-color-picker
          v-model="value.progressDefaultColor"
          :predefine="predefineColors"
        ></el-color-picker>
        <i
          class="el-icon-circle-plus-outline iconcolor f20 poi ml5"
          @click="addProgress"
        ></i>
      </div>
    </el-form-item>
    <div
      class="ml10"
      v-if="
        value.numShowType !== 'text' &&
        value.numProgressList &&
        value.numProgressList.length !== 0
      "
    >
      <el-form-item
        v-for="(item, index) in value.numProgressList"
        :key="index"
        class="progress-box"
      >
        <div>
          <xInput
            placeholder=""
            style="width: 23%"
            v-model="item.start"
            @blur="outInput($event, item, 'start', index)"
          ></xInput>
          <span class="mr5 ml5 line-color">—</span>
          <xInput
            placeholder=""
            style="width: 23%"
            v-model="item.end"
            @blur="outInput($event, item, 'end', index)"
          ></xInput>
        </div>
        <div class="tag-set">
          <el-color-picker
            v-model="item.proColor"
            :predefine="predefineColors"
          ></el-color-picker>
          <template>
            <el-popconfirm
              title="确定删除该进度条配置吗？"
              @confirm="removeProgress(index)"
            >
              <i
                slot="reference"
                class="el-icon-delete iconcolor f20 poi ml5"
              ></i>
            </el-popconfirm>
          </template>
        </div>
      </el-form-item>
    </div>
  </div>
</template>
<script>
import { PREDEFINE_COLORS } from "@/utils/const";
import xInput from "@/components/xInput/index.js";
import { openFormula } from "./formula/index";
import { getHmentitymodelList } from "@/apis/paas/HmEntityModelController.js";
export default {
  components: { xInput },
  props: ["value"],
  computed: {},
  data() {
    return {
      predefineColors: PREDEFINE_COLORS,
    };
  },
  watch: {
    "value.numShowType": {
      handler(val) {
        if (
          val === "circleProgress" &&
          !this.value.circleProgressWidth &&
          this.value.circleProgressWidth !== 0
        ) {
          this.$set(this.value, "circleProgressWidth", 60);
        }
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    async openNumFormulaModule() {
      const columnList = await getHmentitymodelList(
        {
          modelKey: this.value.modelCode,
          activated: true,
        },
        { useCache: true }
      );
      const numColumnList = columnList.filter((item) => {
        return ["NUMBER", "INTEGER"].indexOf(item.type) > -1 && !item.builtIn;
      });
      let numFormulaList = this.value.numFormulaList;
      if (!numFormulaList) {
        numFormulaList = [];
      }
      const flag = true;
      openFormula(numFormulaList, "", "", flag, numColumnList).then(
        (list, prefix, suffix, text) => {
          if (!this.value.numFormulaText) {
            this.$set(this.value, "numFormulaText", text);
          } else {
            this.value.numFormulaText = text;
          }
          if (!this.value.numFormulaList) {
            this.$set(this.value, "numFormulaList", list);
          } else {
            this.value.numFormulaList = list;
          }
        }
      );
    },
    changenumShowType(val) {
      if (val !== "text" && !this.value.numProgressList) {
        this.$set(this.value, "numProgressList", []);
      }
    },
    addProgress() {
      this.value.numProgressList.push({
        start: 0,
        end: 0,
        proColor: "",
      });
    },
    removeProgress(index) {
      this.value.numProgressList.splice(index, 1);
    },
    outInput(value, item, flag, index) {
      item[flag] = value;
      let _value = value;
      if (value !== "") {
        _value = Number(value);
      }
      if (_value > 100) {
        _value = 100;
      }
      _value = this.transformValue(_value, item, flag, index);
      this.$nextTick(() => {
        item[flag] = _value;
      });
    },
    transformValue(value, item, flag, index) {
      const list = this.value.numProgressList;
      let _value = value;
      if (value !== "" && flag === "end") {
        if (value < item["start"]) {
          _value = item["start"];
        }
        if (index < list.length - 1 && _value > list[index + 1]["start"]) {
          this.$nextTick(() => {
            this.value.numProgressList[index + 1]["start"] = value;
          });
        }
      }
      return _value;
    },
    outInputLimitNumber(value) {
      this.value.numlimitNumber = value;
      let _value = value;
      if (value !== "") {
        _value = Number(value);
      }
      if (_value > 10) {
        _value = 10;
      } else if (_value < 0) {
        _value = null;
      }
      this.$nextTick(() => {
        this.value.numlimitNumber = _value;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.tag-set {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.progress-box ::v-deep .el-form-item__content {
  display: flex;
  justify-content: space-between;
}
.line-color {
  color: #dcdfe6;
}
</style>
